<template>
	<div>
		<div class="header">
			 <h3>处理异常答题卡</h3>
			 <p>
				 <b><img src="../../assets/image/school/qp.png" alt="">全屏(F11)</b>
				 <em>退出</em>
			 </p>
		</div>
		<div class="cropperBox">
			 <div class="cropperImageset">
				<div>
				  <canvas ref="canvas" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"></canvas>
				  <div v-if="selectedAreas.length > 0">
				    <p>Selected Areas:</p>
				    <ul>
				      <li v-for="(area, index) in selectedAreas" :key="index">
				        Area {{ index + 1 }}: {{ area }}
				      </li>
				    </ul>
				  </div>
				</div>
			 </div>
			 <div class="uploadcardInfo">
				 <h3>2024年9月月考-语文-作文-密号10002</h3>
				 <ul>
					 <li>
						 <span>试题题号：</span>作文
					 </li>
					 <li>
						 <span>试题密号：</span>10002
					 </li>
					 <li>
						 <span>标记类型：</span>字迹看不清
					 </li>
					 <li>
						<span>标记教师：</span>高老师
					 </li>
					 <li>
						<span>标记时间：</span>2024-01-02
					 </li>
				 </ul>
				 <h3 style="border:none;border-top:solid 1px #D8E4F0;margin-top:25px">处理项</h3>
				 <ul>
					 <li>
						 <span>变更状态：</span>
						 <el-select v-model="examclassify" placeholder="条形码/涂点/手写">
								 <el-option
								   v-for="item in examclassifylist"
								   :key="item"
								   :label="item"
								   :value="item">
								 </el-option>
						  </el-select>
					 </li>
					 <li>
						 <span>处理方法：</span>
						 <el-select v-model="examclassify" placeholder="条形码/涂点/手写">
								 <el-option
								   v-for="item in examclassifylist"
								   :key="item"
								   :label="item"
								   :value="item">
								 </el-option>
						  </el-select>
					 </li>
				 </ul>
				 <div class="qtbuttonset">
					 <em>重新切图</em>
					 <em>重新上传正反面</em>
				 </div>
				 <div class="examboxbutton1">
					 <el-button>确认</el-button>
					 <el-button>上一份</el-button>
					 <el-button>下一份</el-button>
				 </div>
			 </div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      isDrawing: false,
      isResizing: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
      selectedAreas: [], // 存储所有选中的区域
      image: null, // 用于存储图片对象
      activeAreaIndex: null, // 当前选中的区域索引
      resizeHandleIndex: null, // 当前拖动的控制点索引
      overHandleIndex: null, // 当前鼠标悬停的控制点索引
      handleSize: 8, // 控制点的大小
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');

    // 加载图片
    this.image = new Image();
    this.image.src = require('../../assets/image/cardmodle.jpg'); // 替换为你的图片路径
    this.image.onload = () => {
      // 设置 Canvas 宽高为图片的宽高
      this.canvas.width = this.image.width;
      this.canvas.height = this.image.height;

      // 在 Canvas 上绘制图片
      this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
    };
  },
  methods: {
    // 绘制所有矩形框和控制点
    draw() {
      // 清除 Canvas
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

      // 重新绘制图片
      this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);

      // 绘制所有矩形框
      this.selectedAreas.forEach((area, index) => {
        this.ctx.strokeStyle = index === this.activeAreaIndex ? 'red' : 'blue';
        this.ctx.lineWidth = 2;

        // 绘制半透明背景
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; // 黑色透明背景
        this.ctx.fillRect(area.x, area.y, area.width, area.height);

        // 绘制矩形边框
        this.ctx.strokeRect(area.x, area.y, area.width, area.height);

        // 绘制控制点
        if (index === this.activeAreaIndex) {
          this.drawResizeHandles(area);
        }
      });

      // 绘制当前正在绘制的矩形框
      if (this.isDrawing) {
        this.ctx.strokeStyle = 'red';
        this.ctx.lineWidth = 2;

        // 绘制半透明背景
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; // 黑色透明背景
        this.ctx.fillRect(
          this.startX,
          this.startY,
          this.currentX - this.startX,
          this.currentY - this.startY
        );

        // 绘制矩形边框
        this.ctx.strokeRect(
          this.startX,
          this.startY,
          this.currentX - this.startX,
          this.currentY - this.startY
        );
      }
    },

    // 绘制控制点
    drawResizeHandles(area) {
      const handles = this.getResizeHandles(area);
      handles.forEach((handle, index) => {
        this.ctx.fillStyle = 'white';
        this.ctx.strokeStyle = 'black';
        this.ctx.lineWidth = 1;
        this.ctx.fillRect(handle.x - this.handleSize / 2, handle.y - this.handleSize / 2, this.handleSize, this.handleSize);
        this.ctx.strokeRect(handle.x - this.handleSize / 2, handle.y - this.handleSize / 2, this.handleSize, this.handleSize);
      });
    },

    // 获取矩形框的控制点
    getResizeHandles(area) {
      const { x, y, width, height } = area;
      return [
        { x: x, y: y }, // 左上角
        { x: x + width / 2, y: y }, // 上边中点
        { x: x + width, y: y }, // 右上角
        { x: x + width, y: y + height / 2 }, // 右边中点
        { x: x + width, y: y + height }, // 右下角
        { x: x + width / 2, y: y + height }, // 下边中点
        { x: x, y: y + height }, // 左下角
        { x: x, y: y + height / 2 }, // 左边中点
      ];
    },

    // 检查鼠标是否在控制点上
    getResizeHandleIndex(area, mouseX, mouseY) {
      const handles = this.getResizeHandles(area);
      for (let i = 0; i < handles.length; i++) {
        const handle = handles[i];
        if (
          mouseX >= handle.x - this.handleSize / 2 &&
          mouseX <= handle.x + this.handleSize / 2 &&
          mouseY >= handle.y - this.handleSize / 2 &&
          mouseY <= handle.y + this.handleSize / 2
        ) {
          return i;
        }
      }
      return -1;
    },

    // 鼠标按下事件
    handleMouseDown(e) {
      const mouseX = e.offsetX;
      const mouseY = e.offsetY;

      // 检查是否点击了某个矩形框的控制点
      for (let i = 0; i < this.selectedAreas.length; i++) {
        const area = this.selectedAreas[i];
        const handleIndex = this.getResizeHandleIndex(area, mouseX, mouseY);
        if (handleIndex !== -1) {
          this.isResizing = true;
          this.activeAreaIndex = i;
          this.resizeHandleIndex = handleIndex;
          this.startX = mouseX;
          this.startY = mouseY;
          return;
        }
      }

      // 如果没有点击控制点，则开始绘制新矩形框
      this.isDrawing = true;
      this.startX = mouseX;
      this.startY = mouseY;
      this.currentX = mouseX;
      this.currentY = mouseY;
    },

    // 鼠标移动事件
    handleMouseMove(e) {
      const mouseX = e.offsetX;
      const mouseY = e.offsetY;

      // 检测鼠标是否悬停在控制点上
      let overHandleIndex = null;
      if (this.activeAreaIndex !== null) {
        const area = this.selectedAreas[this.activeAreaIndex];
        overHandleIndex = this.getResizeHandleIndex(area, mouseX, mouseY);
      }

      // 动态设置 cursor 样式
      if (overHandleIndex !== null && overHandleIndex !== -1) {
        this.canvas.style.cursor = 'pointer';
        this.overHandleIndex = overHandleIndex;
      } else {
        this.canvas.style.cursor = 'crosshair';
        this.overHandleIndex = null;
      }

      if (this.isResizing) {
        // 调整矩形框大小
        const area = this.selectedAreas[this.activeAreaIndex];
        const handleIndex = this.resizeHandleIndex;
        const { x, y, width, height } = area;

        switch (handleIndex) {
          case 0: // 左上角
            area.x = mouseX;
            area.y = mouseY;
            area.width = x + width - mouseX;
            area.height = y + height - mouseY;
            break;
          case 1: // 上边中点
            area.y = mouseY;
            area.height = y + height - mouseY;
            break;
          case 2: // 右上角
            area.y = mouseY;
            area.width = mouseX - x;
            area.height = y + height - mouseY;
            break;
          case 3: // 右边中点
            area.width = mouseX - x;
            break;
          case 4: // 右下角
            area.width = mouseX - x;
            area.height = mouseY - y;
            break;
          case 5: // 下边中点
            area.height = mouseY - y;
            break;
          case 6: // 左下角
            area.x = mouseX;
            area.width = x + width - mouseX;
            area.height = mouseY - y;
            break;
          case 7: // 左边中点
            area.x = mouseX;
            area.width = x + width - mouseX;
            break;
        }
      } else if (this.isDrawing) {
        // 绘制新矩形框
        this.currentX = mouseX;
        this.currentY = mouseY;
      }

      // 重新绘制 Canvas
      this.draw();
    },

    // 鼠标松开事件
    handleMouseUp() {
      if (this.isDrawing) {
        // 完成绘制新矩形框
        const newArea = {
          x: Math.min(this.startX, this.currentX),
          y: Math.min(this.startY, this.currentY),
          width: Math.abs(this.currentX - this.startX),
          height: Math.abs(this.currentY - this.startY),
        };
        this.selectedAreas.push(newArea);
        this.isDrawing = false;
        this.activeAreaIndex = this.selectedAreas.length - 1; // 设置为最后一个区域
      } else if (this.isResizing) {
        // 完成调整矩形框大小
        this.isResizing = false;
        this.activeAreaIndex = null;
        this.resizeHandleIndex = null;
      }
      this.canvas.style.cursor = 'crosshair'; // 恢复默认样式
    },
  },
};
</script>

<style scoped>
canvas {
  border: 1px solid #000;
  cursor: crosshair;
}
.header{
	min-width:100%;padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	min-width:100%;padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 49px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	height:calc(100vh - 49px);
	background:#fff;
	position:relative
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.qtbuttonset{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top:14px;
}
.qtbuttonset em{
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size:14px;
	color:#fff;
	text-align: center;
	line-height: 34px;
	margin:8px;
}
.qtbuttonset em:last-child{
	width: 124px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color:#295CFF;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal
}
.uploadcardInfo ul li{
	display: flex;
	align-items: center;
	color:#8E96A4;
	font-size:16px;
	padding:0 24px;
	margin-top:24px;
}
.uploadcardInfo ul li span{
	color:#8E96A4;
	width:100px;
}
.uploadcardInfo ul li >>> .el-input__inner{
	border-radius:10px;
}
.uploadcardInfo ul li >>> .el-textarea{
	width:calc(100% - 100px)
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 49px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 49px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 370px);
	height:calc(100vh - 49px);
	overflow:scroll;
	position: relative
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
</style>